<template>
  <div class="columndetail">
    <!--  支付类型选择 -->
    <div class='mc' v-show='isdocType' @click.stop='isdocType=false'>
      <div class='duration' @click.stop='isdocType=true'>
        <div class='top'>
          <a @click.stop='isdocType=false'>取消</a>
          <a @click.stop='sureDocType'>确定</a>
        </div>
        <mt-picker :slots="slotsDocType" :valueKey="'numbering'?'numbering':''" @change="onValuesChangeDocType"></mt-picker>
      </div>
    </div>
    <header>
      <i @click="goBack()"></i>
      <div>专栏详情</div>
    </header>
    <div class="border"></div>
    <div class="top">
      <img :src="infoObj.pic" width="114" height="114" />
      <div class="right">
        <h3>{{infoObj.sname}}</h3>
        <p>播放次数:<b>{{times || 0}}次</b></p>
        <i class="subscribe" @click="goAttention()" v-show='!isAttention'>订阅</i>
        <i class="subscribe" v-show='isAttention'>已订阅</i>
      </div>
    </div>
    <div class="border"></div>
    <div class="nav">
      <div>
        <a class="abstract active" @click="changeSwip(true,0)">
          <b>专栏简介</b>
        </a>
      </div>
      <div>
        <a class="newfresh" @click="changeSwip(false,1)">
          <b>最近更新</b>
        </a>
      </div>
    </div>
    <div class="border5"></div>
    <div class="swipe">
      <div v-if="isShow">
        <v-abstract></v-abstract>
      </div>
      <div v-if="!isShow">
        <v-newfresh></v-newfresh>
      </div>
    </div>
  </div>
</template>
<script>
  import Abstract from './abstract.vue'
  import Newfresh from './newfresh.vue'
  export default {
    data() {
      return {
        isdocType: false, //是否显示就诊类型选择
        slotsDocType: [{
          values: ['微信', '支付宝'],
          className: 'slot1',
          textAlign: 'center'
        }, ],
        list: [],
        isShow: true,
        infoObj: {}, //获取专栏详情的接口对象
        id: '', //专题id
        courseList: [], //最近更新课程列表,包含老师字段
        teacherList: [], //筛选出教师列表 去重
        times: 0, //专栏播放量
        isAttention: false, //是否订阅 默认未订阅
      }
    },
    components: {
      'v-abstract': Abstract,
      'v-newfresh': Newfresh
    },
    methods: {
      // 支付类型选择
      onValuesChangeDocType(picker, values) {
        this.valuesDocType = values[0];
      },
      sureDocType() {
        console.log(this.valuesDocType)
        if (this.valuesDocType == '微信') {
          this.isdocType = false;
          var params = {
            courseid: this.id,
            userid: localStorage.getItem('loginMobile'),
            price: this.charge
          }
          this.$api.post(this.$api.baseURLSchool, "update_user_order/course_order", params, r => {
            if (r.data.ret == 1) {
              const data = {
                order_num: r.data.order_num,
                total_fee: this.charge,
                des: '视频'
              };
              this.$api.post(this.$api.baseURL2, "/android_wxpay", data, r => {
                var params = {
                  partnerid: r.data.mch_id, // merchant id 
                  prepayid: r.data.prepay_id, // prepay id 
                  noncestr: r.data.nonce_str, // nonce 
                  timestamp: r.data.timestamp, // timestamp 
                  sign: r.data.sign, // signed string 
                };
                Wechat.sendPaymentRequest(params, function () {
                  this.$utils._toast('支付成功');
                }, function (reason) {
                  this.$utils._toast(reason);
                });
              }, err => {
                console.log(err);
              }, false, false)
            }
          }, err => {
            console.log(err);
          })


        } else if (this.valuesDocType == '支付宝') {
          //   支付宝支付
          this.isdocType = false;
          var params = {
            courseid: this.id,
            userid: localStorage.getItem('loginMobile'),
            price: this.charge
          }
          this.$api.post(this.$api.baseURLSchool, "update_user_order/course_order", params, r => {
            if (r.data.ret == 1) {
              const data = {
                order_num: r.data.order_num,
                amount: this.charge,
                subject: '视频'
              };
              this.$api.post(this.$api.baseURL2, "/alipay_app", data, r => {
                var params = r.data.data;
                cordova.plugins.alipay.payment(params, function () {
                  this.$utils._toast('支付成功');
                }, function (reason) {
                  this.$utils._toast(reason);
                });
              }, err => {
                console.log(err);
              }, false, false)
            }
          }, err => {
            console.log(err);
          })
        }
      },
      isLogin() {
        if (!this.userid) {
          // this.$router.push({name:'login1'}) 
          this.$utils._toast('请先登录!');
          return false;
        } else {
          return true;
        }
      },
      goBack() {
        if (this.$route.query.name == 'myTake') {
          this.$router.push({
            name: 'myTake'
          })
        } else {
          this.$router.push({
            name: 'column'
          })
        }


      },
      changeSwip(para, index) {
        this.isShow = para;
        $(".nav div a").removeClass("active");
        $(".nav div").eq(index).find("a").addClass("active");
      },
      //获取点进来的某个专栏信息
      getDetailsData() {
        this.id = this.$route.query.id;
        this.userid = localStorage.getItem("loginMobile");
        this.$api.get(this.$api.baseURLSchool, "select_cid/special/" + this.id, {}, r => {
          // console.log(r);
          if (r.data.ret == 1) {
            this.infoObj = r.data.info;
          }

        }, err => {
          console.log(err);
        })
      },
      //获取专栏下的课程列表中所有课程id
      getCidList() {
        this.$api.get(this.$api.baseURLSchool, "selectdata/sub_special/" + this.id, {}, r => {
          // console.log(r);
          var that = this;
          if (r.data.ret == 1) {
            var list = r.data.info;
          }
          var jsonObj = {};
          list.forEach(function (val, index) {
            var cid = val.cid;
            that.getCourseByCid(cid, index, jsonObj);
          });
        }, err => {
          console.log(err);
        })
      },
      //根据cid获取对应课程信息
      getCourseByCid(cid, index, jsonObj) {
        this.$api.get(this.$api.baseURLSchool, "select_cid/view_course_user/" + cid, {}, r => {
          // console.log(r);
          if (r.data.ret == 1) {
            this.courseList.push(r.data.info);
            this.times += r.data.info.times;
            //判断如果教师表中已经有这个教师了 就不push
            if (!jsonObj[r.data.info.uid]) {
              this.teacherList.push(r.data.info);
              jsonObj[r.data.info.uid] = 1;
            }
          }

        }, err => {
          console.log(err);
        })
      },
      //根据userid和专题id查看用户是否订阅课程
      justIsAttention() {
        this.$api.post(this.$api.baseURLSchool, "/selecttype/attention/0?userid=" + localStorage.getItem("loginMobile") +
          "&type=take&id=" + this.id, {}, r => {
            // console.log(r);
            if (r.data.records > 0) {
              this.isAttention = true;
            } else {
              this.isAttention = false;
            }
          }, err => {
            console.log(err);
          })
      },
      //点击订阅
      goAttention() {
        if (!this.isLogin()) {
          return false;
        }
        if (this.infoObj.price) {
          // console.log("去支付");
          this.$api.post(this.$api.baseURLSchool, "/play_only/attention?userid=" + localStorage.getItem("loginMobile") +
            "&type=take&id=" + this.id, {}, r => {
              // console.log(r);
              if (r.data.ret1 == 1) {
                this.$utils._toast("订阅成功");
                this.isAttention = true;
              } else if (r.data.ret1 == -1) {
                this.$utils._toast("订阅失败");
              } else if (r.data.ret == 0) {
                this.$utils._toast("已经订阅过")
              }
            }, err => {
              console.log(err);
            })
        } else { //免费的话直接去订阅
          this.$api.post(this.$api.baseURLSchool, "/play_only/attention?userid=" + localStorage.getItem("loginMobile") +
            "&type=take&id=" + this.id, {}, r => {
              // console.log(r);
              if (r.data.ret1 == 1) {
                this.$utils._toast("订阅成功");
                this.isAttention = true;
              } else if (r.data.ret1 == -1) {
                this.$utils._toast("订阅失败");
              } else if (r.data.ret == 0) {
                this.$utils._toast("已经订阅过")
              }
            }, err => {
              console.log(err);
            })
        }
      },

    },
    created() {
      this.getDetailsData();
      this.getCidList();
      if (this.userid) {
        this.justIsAttention();
      }

    }
  }

</script>
<style lang="scss" scoped>
  .mc {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    z-index: 99;

    .duration {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 235px;
      background: #fff;

      div.top {
        display: flex;
        height: 45px;
        line-height: 45px;
        background: linear-gradient(to bottom, #7ad8ad, #67b296);
        padding: 0 25px;

        a {
          flex: 1;
          font-size: 17px;
          color: #fff;

          &:last-child {
            text-align: right;
          }
        }
      }
    }
  }

</style>
